<template>
  <div>
    <!-- 顶部Banner区域 -->
    <div class="banner">
      <img :src="bannerUrl" alt="Banner Image" class="banner-image" />
    </div>

    <!-- 数据规模展示区域 -->
    <div class="data-section">
      <h2>数据规模展示</h2>
      <div class="charts">
        <!-- 折线图 -->
        <div ref="lineChart" class="chart">
          <div class="chart-title">游客数量变化</div>
          <div class="chart-content"></div>
        </div>
        <!-- 饼状图 -->
        <div ref="pieChart" class="chart">
          <div class="chart-title">游客来源分布</div>
          <div class="chart-content"></div>
        </div>
        <!-- 柱状图 -->
        <div ref="barChart" class="chart">
          <div class="chart-title">热门景点销量</div>
          <div class="chart-content"></div>
        </div>
      </div>
    </div>

    <!-- 自由布局区域（用于放置Neo4j知识图谱） -->
  </div>
</template>

<script>
import * as echarts from 'echarts';
// 使用import语法导入图片
import banner1 from '@/assets/images/banner1.jpg';
import banner2 from '@/assets/images/banner2.jpg';
import banner3 from '@/assets/images/banner3.jpg';

export default {
  name: 'HomePage',
  data() {
    return {
      bannerUrl: banner1,
      imageUrls: [
        banner1,
        banner2,
        banner3
      ],
      currentImageIndex: 0
    };
  },
  mounted() {
    this.initCharts();
    this.rotateBanner();
  },
  methods: {
    initCharts() {
      this.initLineChart();
      this.initPieChart();
      this.initBarChart();
    },
    initLineChart() {
      const lineChart = echarts.init(this.$refs.lineChart.querySelector('.chart-content'));
      const option = {
        title: {},
        tooltip: {},
        legend: {
          data: ['游客数量']
        },
        xAxis: {
          data: ["1月", "2月", "3月", "4月", "5月", "6月", '7月', "8月", '9月', "10月", '11月', '12月']
        },
        yAxis: {},
        series: [{
          name: '游客数量',
          type: 'line',
          data: [120, 200, 150, 80, 70, 100, 50, 70, 44, 66, 88, 133]
        }]
      };
      lineChart.setOption(option);
    },
    initPieChart() {
      const pieChart = echarts.init(this.$refs.pieChart.querySelector('.chart-content'));
      const option = {
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          top: '0.5%',
          left: 'left',
          width: 'auto',
          itemWidth: 20,
          itemHeight: 14
        },
        series: [
          {
            name: '来源',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '本地' },
              { value: 735, name: '国内' },
              { value: 580, name: '国际' },
              { value: 484, name: '其他' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      pieChart.setOption(option);
    },
    initBarChart() {
      const barChart = echarts.init(this.$refs.barChart.querySelector('.chart-content'));
      const option = {
        title: {},
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ["兵马俑", "华山", "大雁塔", "城墙"]
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [200, 300, 150, 100]
        }]
      };
      barChart.setOption(option);
    },
    rotateBanner() {
      this.currentImageIndex = (this.currentImageIndex + 1) % this.imageUrls.length;
      this.bannerUrl = this.imageUrls[this.currentImageIndex];
      setTimeout(this.rotateBanner, 3000); // 每3秒更换一次图片
    }
  }
};
</script>

<style scoped>
/* 全局样式调整 */
h1 {
  text-align: center;
  margin-top: 20px;
}

p {
  text-align: center;
  color: #666;
}

/* Banner区域样式 */
.banner {
  width: 100%;
  margin: 20px 0;
  text-align: center;
}

.banner-image {
  width: 100%;
  max-width: 1200px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 数据规模展示区域样式 */
.data-section {
  margin: 40px 0;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.data-section h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.charts {
  display: flex;
  justify-content: space-around;
  gap: 20px;
}

.chart {
  width: 30%;
  height: 300px; /* 增加高度以适应图表 */
  background-color: #e0e0e0;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #666;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.chart-title {
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}

.chart-content {
  width: 100%;
  height: 100%;
}

/* 自由布局区域样式（用于Neo4j知识图谱） */
.free-layout {
  margin: 40px 0;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.free-layout h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.neo4j-container {
  width: 100%;
  height: 400px;
  background-color: #e0e0e0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #666;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.neo4j-placeholder {
  text-align: center;
}
</style>
